<template>
  <view class="big" :style="{height:screenHeight+'px'}">
    <view class="input">
      <input type="search" name="" placeholder="搜索文件" id="" v-model="search">
    </view>
    <view class="mybutton" >
      <view class="button">
        <view class="button_view1" :class=" accomplishOrunfinished ? 'accomplish' : 'unfinished' "
          @click="accomplish()">
          <view class="text_center">
            <text class="text_center1">未完成</text>
          </view>
        </view>
        <view class="button_view2" :class=" accomplishOrunfinished ?  'unfinished' : 'accomplish' "
          @click="unfinished()">
          <view class="text_center">
            <text class="text_center1">完成</text>
          </view>
        </view>
      </view>

      <view class="text" v-show="!accomplishOrunfinished" v-for="(item,index) in accomplishs_1" :key="item.id">
        <view class="mytext">
          <view class="">
            <view class="textTitle" style="display: inline-block;" @click="toStaySign()">{{item.fileName.split('.')[0]}}
            </view><br>
            <view class="" style="display: inline-block;font-size: 25rpx;width: 120rpx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
              {{item.sysUser.name}}&nbsp;|&nbsp;{{item.signatorName}}
            </view>
          </view>
          <view class="bottText">
            <view class="">{{item.createTime.slice(0,10)}}</view>
          </view>
          <view>
            <text class="wait" v-if="item.status==1" @click="notAccomplish(item)">待我签</text>
          </view>
        </view>
      </view>


      <view class="text" v-show="accomplishOrunfinished" v-for="(item,index) in accomplishs_2" :key="item.id">
        <view class="mytext">
          <view class="">
            <view class="textTitle" style="display: inline-block;" @click="toAccomplish">{{item.fileName.split('.')[0]}}</view><br>
            <view class="" style="display: inline-block;font-size: 25rpx;width: 120rpx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
            {{item.sysUser.name}}&nbsp;|&nbsp;{{item.signatorName}}</view>
          </view>
          <view class="bottText">
            <view class="">{{item.createTime.slice(0,10)}}</view>
          </view>
          <view>
            <text @click="toCompleted(item)" class="finished">待他签</text>
          </view>
        </view>
      </view>




    </view>

  </view>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {
    data() {
      return {
        accomplishOrunfinished: false,
        search: '',
        screenHeight: 0,//高度兼容适配
      }
    },
    onLoad() {
       this.screenHeight = uni.getSystemInfoSync().windowHeight
    },
    mounted() {
      this.getContractInfo()
    },
    methods: {
      toCompleted(item){
        uni.setStorageSync('file', item)
        uni.navigateTo({
          url:'/subpkg/file-accomplish/file-accomplish'
        })
      },
      notAccomplish(item){
        uni.setStorageSync('file', item)
        uni.navigateTo({
          url:'/subpkg/my-file-contract/my-file-contract'
        })
      },
      accomplish() {
        this.accomplishOrunfinished = !this.accomplishOrunfinished
      },
      unfinished() {
        this.accomplishOrunfinished = !this.accomplishOrunfinished
      },
      toStaySign() {
        uni.navigateTo({
          url: '/subpkg/sign-process/sign-process'
        })
      },
      toAccomplish() {
        uni.navigateTo({
          url: '/subpkg/sign-process/sign-process'
        })
      },
      getContractInfo() {
        this.$store.dispatch('contract/getContractInfo')
      }
    },
    computed: {
      ...mapState({
        fileInfo: state => state.contract.fileInfo,
      }),
      accomplishs_1() {
        let items = []
        if (!this.fileInfo.list) return
        this.fileInfo.list.forEach((item) => {
          if (item.status == 1 || item.status == 2) {
            items.push(item)
          }
        })
        return items
      },
      accomplishs_2() {
        let items = []
        if (!this.fileInfo.list) return
        this.fileInfo.list.forEach((item) => {
          if (item.status == 3 || item.status == 4 || item.status == 5 || item.status == 6) {
            items.push(item)
          }
        })
        return items
      },
    },
    watch:{
      search(newV, oldV){
        this.$store.dispatch('contract/getSearch',newV)
      }
    },
    filters: {

    }
  }
</script>

<style>
  .text_center1 {}

  .text_center {
    display: flex;
    justify-content: center;
  }
  .textTitle{
    width: 128rpx;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .finished {
    width: 178rpx;
    height: 72rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;
    background: #FFFFFF;
    border: 2rpx solid #C8A556;
    color: #CCC;
    border-radius: 103rpx;
  }

  .accomplishColor {
    color: #CCCCCC;
  }

  .accomplish {
    background-color: #FFFFFF;
    color: #C8A556;
  }

  .big {
    background-color: #F2F2F2;
    width: 100%;
    overflow-x:hidden
  }

  .unfinished {
    background: #C8A556;
    color: #FFFFFF;
  }

  .input {
    width: 750rpx;
    height: 180rpx;
    background: linear-gradient(0deg, #3E4855 0%, #181A1E 100%);
    display: flex;
    align-items: center;
  }

  /* .input image{
		width: 16px;
		height: 16px;
	} */
  .input input {
    width: 500rpx;
    height: 68rpx;
    background: #FFFFFF;
    border-radius: 30rpx;
    padding-left: 30rpx;
    margin: 0 auto;
    padding: 5rpx 20rpx;
  }

  .mybutton {
    padding: 0 40rpx;
    
    
  }

  .button {
    margin: 42rpx 0 34rpx 0;
  }

  .button_view1 {
    line-height: 74rpx;
    display: inline-block;
    width: 155rpx;
    height: 74rpx;
    border-radius: 10rpx 0 0 10rpx;


  }

  .button_view2 {
    line-height: 74rpx;
    display: inline-block;
    width: 157rpx;
    height: 74rpx;
    border-radius: 0 10rpx 10rpx 0;
  }


  .text {
    width: 100%;
    height: auto;
    margin: 0 auto;
    /* border: 1px solid #181A1E; */
    padding: 20rpx 0;
    margin-bottom: 20rpx;
    border-radius: 20rpx;
    background-color: rgb(255, 255, 255);

  }

  .mytext {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .bottText {
    color: rgba(0, 0, 0, 0.7);
    font-size: 28rpx;
    margin-bottom: -47rpx;
  }

  .wait {
    width: 178rpx;
    height: 72rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;
    background: #FFFFFF;
    border: 2rpx solid #C8A556;
    color: #C8A556;
    border-radius: 103rpx;
  }
</style>
